<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import autoResize from '@/utils/autoResize'
import { deepClone, deepMerge } from '@/utils'

const props = defineProps({
  color: {
    type: Array,
    default: () => ([]),
  },
  backgroundColor: {
    type: String,
    default: 'transparent',
  },
})

const borderBox = ref(null)
const { width, height, initWH } = autoResize(borderBox)

defineExpose({
  initWH,
})

const state = reactive({
  defaultColor: ['#6586ec', '#2cf7fe'],

  mergedColor: [],
})

watch(() => props.color, () => {
  mergeColor()
})

onMounted(() => {
  mergeColor()
})

function mergeColor() {
  state.mergedColor = deepMerge(deepClone(state.defaultColor, true), props.color || [])
}
</script>

<template>
  <div ref="borderBox" class="dv-border-box">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <path
          :fill="backgroundColor"
          :stroke="state.mergedColor[0]"
          :d="`
          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
          L ${width - 20} 10 L ${width - 5} 25
          L ${width - 5} ${height - 5} L 20 ${height - 5}
          L 5 ${height - 20} L 5 20
        `"
      />

      <path
          fill="transparent"
          stroke-width="3"
          stroke-linecap="round"
          stroke-dasharray="10, 5"
          :stroke="state.mergedColor[0]"
          :d="`M 16 9 L 61 9`"
      />

      <path
          fill="transparent"
          :stroke="state.mergedColor[1]"
          :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
      />

      <path
          fill="transparent"
          :stroke="state.mergedColor[1]"
          :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
      />
    </svg>
    <div class="border-box-content">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.dv-border-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>